import styles from "./index.module.less";
import { ArrowRightOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { IDocument } from "../../pages/documents/dto";

const FlipCard = ({
  document,
  index,
}: {
  document: IDocument;
  index: number;
}) => {
  console.log(document);

  const navigate = useNavigate();
  const Tag = ({ t }: { t: string }) => (
    <div className={styles.tagItem}>{t}</div>
  );
  return (
    <div
      className={styles.container}
      onClick={() =>
        navigate(`/documents/document?filePath=${document.docFile}`)
      }
    >
      <div className={styles.tags}>
        {document?.tags &&
          document.tags.map((t, i) => {
            return <Tag t={t.tagName} key={i} />;
          })}
      </div>
      <div className={styles.contentWrapper}>
        <div className={styles.content}>
          {/* <img src={} /> */}
          <span>{document.docName.slice(0, 1)}</span>
        </div>
        <div className={styles.contentFlip}>
          {/* <img src={} /> */}
          <span>{document.docName}</span>
        </div>
      </div>
      <div className={styles.footer}>
        <div className={styles.title}>{document.docName}</div>
        <div className={styles.btn}>
          <div>
            <ArrowRightOutlined />
          </div>
        </div>
      </div>
    </div>
  );
};

export default FlipCard;
